<template>
    <div style="padding:20px">
        <h4 class="mt-2 mb-4">添加Role</h4>
        <Form :model="role" label-position="top">
            <FormItem label="名称">
                <Input v-model="role.name"></Input>
            </FormItem>
            <FormItem label="权限">
                <div style="font-size:16px">
                    <span @click="toggle(true)"><a href="#">选择全部</a></span>&nbsp;&nbsp;/&nbsp;
                    <span @click="toggle(false)"><a href="#">反选全部</a></span>
                </div>
                <Tree ref="tree" class="mt-2" :data="permissions" show-checkbox multiple></Tree>
                <Button @click="create" class="mt-4" type="primary">发布</Button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
    export default {
        name: 'RolesCreate',
        mounted() {
            this.getPermissions()
        },
        methods: {
            getPermissions() {
                http.get('/api/permission/').then((data)=>{
                    let p = [];
                    Object.keys(data).forEach((key)=>{
                        let item  = {};
                        item.title = key;
                        item.expand = false;
                        item.checked = false;
                        item.children =[];
                        data[key].forEach((childItem)=>{
                            let child = {};
                            child.title = childItem.name;
                            child.expand = true;
                            child.id = childItem.id;
                            child.checked = false;
                            item.children.push(child);
                        });
                        p.push(item);
                    });
                    this.permissions = p;
                });
            },
            getId(ids,item) {
                if (item.children != 'undefined') {
                    item.children.forEach((item)=>{
                        if(item.checked) {
                            ids.push(item.id);
                        }
                    });
                }
            },
            toggle(open) {

                Object.keys(this.permissions).forEach((key)=>{
                    this.permissions[key].checked = false;
                    this.permissions[key].children.forEach((childItem)=>{
                        childItem.checked = open;
                    });
                });
            },
            create() {
                let ids = [];
                this.permissions.forEach((item)=> {
                    this.getId(ids, item);
                });
                let params = new URLSearchParams();
                params.append('name',this.role.name);
                params.append('ids',JSON.stringify(ids));
                http.post('/api/role',params).then((data)=>{
                    console.log(data)
                });
            },
        },
        computed: {

        },
        data () {
            return {
                role: {},
                permissions: [],
            }
        }
    }
</script>
